﻿
@{
    ViewData["Title"] = "Home";
    var tasks = ViewData["Tasks"] as List<TaskGroupDto>;
}

<div>
    <div id="liveAlertPlaceholder"></div>
    <div class="hstack">
        <a type="button" class="btn btn-primary btn-sm" asp-controller="Home" asp-action="Index">创建</a>
    </div>
    <table class="table table-striped table-hover table-sm table-bordered mt-3">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">剧集名称</th>
                <th scope="col">集数</th>
                <th scope="col">下载进度</th>
            </tr>
        </thead>
        <tbody>
            @if (tasks is not null && tasks.Count > 0)
            {
                int i = 1;
                foreach (var task in tasks)
                {
                    <tr>
                        <th scope="row">@(i++)</th>
                        <td>@task.Name</td>
                        <td>@(task.Tasks?.Count ?? 0)</td>
                        <td>@task.Percentage.Value.ToString("P2")</td>
                    </tr>
                }
            }
        </tbody>
    </table>
</div>

<script>
    const alertPlaceholder = document.getElementById('liveAlertPlaceholder');

    const alert = (message, type) => {
      const wrapper = document.createElement('div')
      wrapper.innerHTML = [
        `<div class="alert alert-${type} alert-dismissible" role="alert">`,
        `   <div>${message}</div>`,
        '   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
        '</div>'
      ].join('')

      alertPlaceholder.append(wrapper)
    };

</script>